<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<link rel="icon" href="img/favicon.ico">
    <title>歌手榜单</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet"/>
	<style>
		body {
		    background-color: #fafafa;
		}
		a:focus {
			color: #FFFFFF;
		}
	</style>
	
	<meta name="keywords" content="音乐，牟云音乐，网易云音乐，音乐馆，歌单，排行榜，歌手，免费下载，在线音乐，免费音乐,音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，music.superboyjack.cn">
	<meta name="description" content="牟云音乐是一个音乐爱好者推出的一款网络音乐服务产品，海量音乐在线试听、新歌热歌在线首发、歌词翻译、手机铃声下载、高品质无损音乐试听、海量无损曲库、正版音乐下载、、MV观看等，是互联网音乐播放和下载的优选。">
	<!-- 百度统计 -->
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "https://hm.baidu.com/hm.js?58f4b4a2c99429764a9757416df9e31f";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
  </head>
  <body>
		<div class="mod_header">
		    <div class="section_inner">
		        <h1 class="qqmusic_title"><a href="index.html"><img src="img/musiclogo.png" alt="牟云音乐" class="music_logo"></a></h1>
		        <!-- 导航 S -->
		        <ul class="mod_top_nav" role="nav">
		            <li class="top_nav__item">
		                <a href="index.html" class="top_nav__link" title="音乐馆">音乐馆</a>
		            </li>
		            <li class="top_nav__item">
		                <a href="playlists.html" class="top_nav__link" title="歌单">歌单</a>
		            </li>
					<li class="top_nav__item">
					    <a href="index.html#ranking" class="top_nav__link" title="排行榜">排行榜</a>
					</li>
					<li class="top_nav__item">
					    <a href="singers.html" class="top_nav__link top_nav__link--current" title="歌手">歌手</a>
					</li>
		        </ul>
			</div>
		</div>
		
		<div class="mod_singer_push">
			<div class="section_inner">
				<h2 class="singer_push__tit">
					最强歌手，云集于此
				</h2>
			</div>
		</div>
		
		<div class="container main">
			<div class="page-header">
				<h2 class="text-center"><b>歌 手 榜 单</b> </h2>
			</div>
		</div>
		
			
		<div class="main">
			<div id="mod-singerlist">
				<div class="mod_singer_list" id="singers">
					<ul class="singer_list__list js_avtar_list" >
						<li class="singer_list__item" v-for="singer in singers">
							<div class="singer_list__item_box">
								<a :href="toSingerPage(singer.id)" class="singer_list__cover js_singer" hidefocus="true">
									<img class="singer_list__pic" :src="singer.img1v1Url + '?param=200y200'">
								</a>
								<h3 class="singer_list__title"><a :href="toSingerPage(singer.id)"class="js_singer">{{ singer.name }}</a></h3>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<footer class="footer">
		    <div class="container">	
				<div style="text-decoration:none; text-align:center; padding:20px 0;">
					<div style="width:600px;margin:0 auto; padding:20px 0;">
						<p style="margin:10px 0px;">
						<b>Copyright © 2019
						<a href="https://superBoyJack.cn" target="_blank" title="superBoyJack"> superBoyJack</a> 版权所有 Powered By 
						<a href="http://wpa.qq.com/msgrd?uin=2656288235" target="_blank" title="superBoyJack">superBoyJack</a> Design.&nbsp;&nbsp;
						</b>
						<!-- 备案信息代码 -->
						</p>
						<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41152502000110" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
							<img src="https://superboyjack.cn/upload/2019/11/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87-b8473f72b5dc4bf1885d394815c38a9a.png" style="float:left;"/>
							<p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">
							豫公网安备 41152502000110号 豫ICP备19039675号
							</p>
						</a>
					</div>
				</div>
			</div>
		</footer>	
		
		
		
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/jquery.base64.js"></script>
  </body>
	<script>
		$.getJSON(
		    "https://api.music.superboyjack.cn/toplist/artist",
		    function(data) {
				if(data.code == 200){
					singer_rankingVue.singers = data.list.artists;
				}
		    }
		);
		
		var singer_rankingVue = new Vue({
			el: '#singers',
			data: {
				singers: [],
			},
			methods: {
				// 传送至相应的歌手详情页面
				toSingerPage: function (id) {
					return 'singer.html?' + $.base64.encode('id=' + id);
				},
				//根据行列得到元素在数组里的下表
				
			},
		});
	</script>
</html>